<!DOCTYPE html>
<html>
<head>
    <title>森林冰火人</title>
    <style>
        #game {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        .character {
            width: 40px;
            height: 60px;
            position: absolute;
        }
        #fire { background: red; }
        #water { background: blue; }
        .block {
            width: 40px;
            height: 40px;
            position: absolute;
            background: green;
        }
        #exit {
            width: 60px;
            height: 60px;
            position: absolute;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="fire" class="character" style="left: 50px; top: 300px;"></div>
        <div id="water" class="character" style="left: 100px; top: 300px;"></div>
        <!-- 障碍物 -->
        <div class="block" style="left: 200px; top: 300px;"></div>
        <div class="block" style="left: 240px; top: 260px;"></div>
        <!-- 出口 -->
        <div id="exit" style="left: 500px; top: 50px;"></div>
    </div>

    <script>
        const game = document.getElementById('game');
        const fire = document.getElementById('fire');
        const water = document.getElementById('water');
        const exit = document.getElementById('exit');
        const blocks = document.getElementsByClassName('block');
        const speed = 5;

        // 移动检测
        function checkCollision(character, dx, dy) {
            const rect = character.getBoundingClientRect();
            const newX = rect.left + dx;
            const newY = rect.top + dy;
            
            // 边界检测
            if (newX < 0 || newX + 40 > game.offsetWidth || newY < 0 || newY + 60 > game.offsetHeight) {
                return true;
            }
            
            // 障碍物检测
            for (const block of blocks) {
                const blockRect = block.getBoundingClientRect();
                if (newX < blockRect.right && newX + 40 > blockRect.left &&
                    newY < blockRect.bottom && newY + 60 > blockRect.top) {
                    return true;
                }
            }
            return false;
        }

        // 移动角色
        function moveCharacter(character, dx, dy) {
            if (!checkCollision(character, dx, dy)) {
                character.style.left = `${parseInt(character.style.left) + dx}px`;
                character.style.top = `${parseInt(character.style.top) + dy}px`;
            }
        }

        // 键盘事件
        document.addEventListener('keydown', (e) => {
            // 火娃：WASD
            if (e.key === 'w' || e.key === 'ArrowUp') {
                moveCharacter(fire, 0, -speed);
            } else if (e.key === 's' || e.key === 'ArrowDown') {
                moveCharacter(fire, 0, speed);
            } else if (e.key === 'a' || e.key === 'ArrowLeft') {
                moveCharacter(fire, -speed, 0);
            } else if (e.key === 'd' || e.key === 'ArrowRight') {
                moveCharacter(fire, speed, 0);
            }
            
            // 冰娃：方向键
            if (e.key === 'ArrowUp') {
                moveCharacter(water, 0, -speed);
            } else if (e.key === 'ArrowDown') {
                moveCharacter(water, 0, speed);
            } else if (e.key === 'ArrowLeft') {
                moveCharacter(water, -speed, 0);
            } else if (e.key === 'ArrowRight') {
                moveCharacter(water, speed, 0);
            }
            
            // 检查通关
            const fireRect = fire.getBoundingClientRect();
            const waterRect = water.getBoundingClientRect();
            const exitRect = exit.getBoundingClientRect();
            
            if (fireRect.intersects && waterRect.intersects) {
                alert('通关成功！');
            }
        });
    </script>
</body>
</html>